<template>
    <div class="module-content">
        <div class="module-header">
            <h2>礼物管理</h2>
            <el-button type="primary" @click="handleAddGift">
                <el-icon>
                    <Plus />
                </el-icon>
                添加礼物
            </el-button>
        </div>
        <div class="table-container">
            <el-table :data="pager.lists" style="width: 100%" stripe>
                <el-table-column prop="id" label="ID" width="80" />
                <el-table-column prop="name" label="礼物名称" />
                <el-table-column prop="cover" label="礼物封面" >
                    <template #default="scope">
                        <el-image :src="scope.row.cover" alt="礼物封面" style="width: 80px; height: 80px;" />
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="普通价格" width="120">
                    <template #default="scope">
                        ¥{{ scope.row.price }}
                    </template>
                </el-table-column>
                <el-table-column prop="vip_price" label="豪华价格" width="120">
                    <template #default="scope">
                        ¥{{ scope.row.vip_price }}
                    </template>
                </el-table-column>
                <el-table-column prop="svip_price" label="尊享价格" width="120">
                    <template #default="scope">
                        ¥{{ scope.row.svip_price }}
                    </template>
                </el-table-column>
                <el-table-column prop="is_recommend" label="是否推荐" width="100">
                    <template #default="scope">
                        <el-tag :type="getTypeTagType(scope.row.is_recommend)">
                            {{ getTypeLabel(scope.row.is_recommend) }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="180" />
                <el-table-column label="操作" width="200">
                    <template #default="scope">
                        <el-button size="small" @click="handleEditGift(scope.row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="handleDeleteGift(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 编辑弹窗 -->
        <GiftEditDialog v-model="showEditDialog" :edit-data="currentEditData" @confirm="handleConfirmEdit" :family_id="route.query.family_id" />
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import GiftEditDialog from './edit.vue'
import { apiFamilyGiftGiftList, apiFamilyGiftDeleteGift } from '@/api/rms'
import { usePaging } from '@/hooks/usePaging'

const route = useRoute()
const router = useRouter()



// 弹窗控制
const showEditDialog = ref(false)
const currentEditData = ref(null)
// 礼物列表数据
const giftList = ref([])

// 获取类型标签样式
const getTypeTagType = (type: any) => {
    const typeMap = {
        normal: '',
        luxury: 'warning',
        premium: 'success'
    }
    return typeMap[type] || ''
}

// 获取类型标签文本
const getTypeLabel = (type: any) => {
    const typeMap = {
        0: '不推荐',
        1: '推荐',
    }
    return typeMap[type] || '未知'
}

// 添加礼物
const handleAddGift = () => {
    currentEditData.value = null
    showEditDialog.value = true
}

// 编辑礼物
const handleEditGift = (row: any) => {
    currentEditData.value = { ...row }
    showEditDialog.value = true
}

// 删除礼物
const handleDeleteGift = async (row: any) => {
    try {
        await ElMessageBox.confirm(
            `确定要删除礼物"${row.name}"吗？`,
            '确认删除',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }
        )

        // 这里应该调用删除API
        await apiFamilyGiftDeleteGift({id: row.id, family_id: Number(route.query.family_id)})
        ElMessage.success('删除成功')
    } catch {
        ElMessage.info('已取消删除')
    }
}

// 确认编辑回调
const handleConfirmEdit = (formData: any) => {
    if (currentEditData.value) {
        // 编辑模式
        const index = giftList.value.findIndex(item => item.id === currentEditData.value?.id)
        if (index > -1) {
            giftList.value[index] = {...giftList.value[index],...formData,updateTime: new Date().toLocaleString()}
            ElMessage.success('修改成功')
        }
    } else {
        // 新增模式
        getLists()
        ElMessage.success('添加成功')
    }

    showEditDialog.value = false
    currentEditData.value = null
}
const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: apiFamilyGiftGiftList,
    params: {
        family_id: route.query.family_id
    }
})

// 组件挂载时获取数据
onMounted(async () => {
    // 这里可以调用API获取礼物列表
    console.log('礼物管理页面已加载')
    await getLists()
})
</script>

<style scoped>
.module-content {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.module-header {
    padding: 20px;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.module-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.table-container {
    padding: 0 20px 20px;
}
</style>